<template>
	<div class="main-con" v-loading="loading">
		<div class="head-card" :style="{ height: showOprBtn ? '186px' : '134px' }">
			<div class="head-con">
				<div class="img-con">
					<img class="left-img" src="@/assets/image/serverRoom/zcgl.svg" />
				</div>
				<el-descriptions class="head-descriptions" :title="`资产编号: ${assetManage.orderNum}`" :column="2">
					<el-descriptions-item label="创建人">{{ assetManage.createUserName }}</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{ dateFormat(assetManage.createTime, 'yyyy-MM-dd HH:mm:ss') }}</el-descriptions-item>
					<el-descriptions-item label="备注">{{ assetManage.notes }}</el-descriptions-item>
				</el-descriptions>
				<div class="status-con">
					<div class="top">状态</div>
					<div class="bottom">{{ assetManage.stateName }}</div>
				</div>
			</div>
			<div v-if="showOprBtn" class="head-btn">
				<!-- <el-button type="default" size="small" @click="rejectHandler">驳回</el-button>
				<el-button type="primary" size="small" @click="confirmHandler">通过</el-button> -->
				<el-button type="default" size="small" @click="rejectHandler">驳回</el-button>
				<el-button type="primary" size="small" @click="passHandler">通过</el-button>
			</div>
		</div>
		<div class="flow-con">
			<div class="title-con">
				流程进度
			</div>
			<el-steps class="steps" :active="flowActive" align-center>
				<el-step>
					<template slot="icon">
						<i class="el-icon-success"></i>
					</template>
					<template slot="title">
						<div style="color: #333333;">
							创建资产登记申请单
						</div>
					</template>
					<template slot="description">
						<div style="color: #333333;">
							<div>资产管理员：{{ assetManage.createUserName }}</div>
							<div>{{ dateFormat(assetManage.createTime, 'yyyy-MM-dd HH:mm') }}</div>
						</div>
					</template>
				</el-step>
				<el-step>
					<template slot="icon">
						<i class="el-icon-success"></i>
					</template>
					<template slot="title">
						<span :style="{ color: assetManage.state == '3' ? '#EA305C' : '#333333' }">{{ assetManage.stateName }}</span>
					</template>
					<template slot="description">
						<div style="color: #333333;">
							<div>项目负责人：{{ assetManage.proLeaderName }}</div>
							<div>{{ dateFormat(assetManage.createTime, 'yyyy-MM-dd HH:mm') }}</div>
							<div v-if="assetManage.state == '3'">驳回原因：{{ assetManage.backNotes }}</div>
						</div>
					</template>
				</el-step>
				<el-step>
					<template slot="icon">
						<i class="el-icon-success"></i>
					</template>
					<template slot="title">
						<div style="color: #333333;">
							<div>完成</div>
						</div>
					</template>
				</el-step>
			</el-steps>
		</div>
		<div :class="['info-con', showOprBtn ? 'hasBtnCon' : 'hasNoBtnCon']">
			<div>
				<div class="title-con">
					项目信息
				</div>
				<el-descriptions class="marginLeft" :column="2">
					<el-descriptions-item label="项目名称">{{ assetManage.proName }}</el-descriptions-item>
					<el-descriptions-item label="项目编号">{{ assetManage.proCode }}</el-descriptions-item>
					<el-descriptions-item label="项目负责人">{{ assetManage.proLeaderName }}</el-descriptions-item>
				</el-descriptions>
			</div>
			<div>
				<div class="title-con">
					<div style="flex: 1;">
						登记资产信息
					</div>
				</div>
				<el-descriptions class="marginLeft" :column="1">
					<el-descriptions-item label="到货验收单">
						<div class="file-con" v-for="(item, index) in fileList" :key="index">
							<el-image class="image" :src="item" fit="fill" :preview-src-list="fileList"></el-image>
						</div>
					</el-descriptions-item>
				</el-descriptions>
				<div class="marginLeft" style="width: 90%;">
					<div class="asset-list">
						<div style="flex: 1;">
							资产清单
						</div>
						<div>
							<span class="text-btn-table" style="cursor: pointer;font-weight: 400;font-size: 14px;" @click="assetExport">
								资产导出
							</span>
							<span class="text-btn-table" style="cursor: pointer; margin-left: 10px;font-weight: 400;font-size: 14px" v-print="'#printStyle'">
								批量打印二维码
							</span>
						</div>
					</div>
					<el-table class="systemTable" :data="assetManage.assetList" border stripe>
						<el-table-column prop="assetTypeName" label="资产类型"></el-table-column>
						<el-table-column prop="assetModel" label="资产型号"></el-table-column>
						<el-table-column prop="assetSerialNum" label="资产序列号"></el-table-column>
						<el-table-column prop="assetPlaceName" label="资产位置"></el-table-column>
						<el-table-column prop="manufacturerName" label="生产厂商"></el-table-column>
						<el-table-column label="操作" align="center" width="100">
							<template v-slot="{ row }">
								<el-button class="text-btn-table" type="text" size="small" v-print="`#pc-${row.hisId}`">二维码</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<el-dialog class="dialog" title="资产登记审核通过" :visible.sync="showAgreeWin" width="30%" :before-close="handleAgreeClose">
			<div style="font-size: 16px;font-family: PingFang SC;font-weight: 400;">
				您确定要通过本项目的资产信息登记审核？
			</div>
			<div style="font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #666666;">项目名称：{{ assetManage.proName }}</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="handleAgreeClose">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmitAgree">确认</el-button>
			</div>
		</el-dialog>
		<!-- style="display:none" -->
		<div style="display:none">
			<div ref="print" id="printStyle">
				<div class="asset-print" v-for="asset in assetManage.assetList" :key="asset.hisId">
					<asset-print :asset="asset" printType="asset" />
					<asset-print :asset="asset" printType="asset" />
				</div>
			</div>
			<div v-for="asset in assetManage.assetList" :key="asset.hisId" :id="`pc-${asset.hisId}`">
				<div class="asset-print">
					<asset-print :asset="asset" printType="asset" />
					<asset-print :asset="asset" printType="asset" />
				</div>
			</div>
		</div>
		<asset-flow-send v-if="showFlowSend" @close="closeFlowSend" :checkType="checkFlowType" @ok="FlowSendsave" :instNodeId="instNodeId" :sendtype="sendtype" :wfUrl="wfUrl"></asset-flow-send>
	</div>
</template>

<script>
	import assetApi from '@/api/assetApi'
	import assetFlowMixin from '@/mixins/assetFlowMixin'
	import { getAction, postAction } from '@/utils/httpUtil'
	import { dateFormat } from '@/utils/public'
	import AssetPrint from './models/AssetPrint'
	import config from '@/tools/config'
	export default {
		name: 'assetInfo',
		components: {
			AssetPrint,
		},
		mixins: [assetFlowMixin],
		data() {
			return {
				assetManage: {},
				flowActive: 1,
				agreeForm: {
					reason: '',
				},
				fileList: [],
				previewList: [],
				showAgreeWin: false,
				// printContent: {
				// 	id: 'printStyle',
				// 	preview: true, // 预览工具是否启用
				// 	previewTitle: '', // 预览页面的标题
				// 	popTitle: '', // 打印页面的页眉
				// 	extraCss: '',
				// 	extraHead: '',
				// },
				wfUrl: {
					getSendToUrl: '/assetManage/getSendTo',
					sendToUrl: '/assetManage/sendTo',
					getBackToUrl: '/assetManage/getBackTo',
					backToUrl: '/assetManage/backTo',
				},
				loading: false,
			}
		},
		computed: {
			showOprBtn() {
				return this.assetManage.wfInstNodeId && this.assetManage.state == '1' ? true : false
			},
		},
		mounted() {
			const { params } = this.$route
			if (params && params.id) {
				this.loadInfo(params.id)
			}
		},
		methods: {
			dateFormat,
			loadInfo(id) {
				this.loading = true
				getAction(assetApi.assetManage.detial + id).then(res => {
					this.loading = false
					if (res.success && res.info) {
						this.assetManage = res.info
						if (res.info.state == '1' || res.info.state == '3') {
							this.flowActive = 2
						}
						if (res.info.state == '2') {
							this.flowActive = 3
						}
						if (this.assetManage.fileId) {
							let fileNameList = this.assetManage.fileId.split(',')
							fileNameList.forEach(fileName => {
								// `wiremap.g/acceptance_form/${fileName}`
								// console.log(config.base_url)
								this.fileList.push(`${config.base_url}wiremap.g/acceptance_form/${fileName}`)
								// this.fileList.push({ name: fileName, file: 'http://localhost:9090/wiremap.g/acceptance_form/20240110150859934.jpg' })
							})
						}
					}
				})
			},
			// rejectHandler() {
			// 	this.$prompt('驳回原因: ', '资产登记审核驳回', {
			// 		cancelButtonText: '取消',
			// 		confirmButtonText: '确定',
			// 		inputValidator: function(val) {
			// 			if (val) return true
			// 			else return false
			// 		},
			// 		inputErrorMessage: '请输入驳回原因',
			// 		inputPlaceholder: '请输入驳回原因',
			// 	})
			// 		.then(({ value }) => {
			// 			postAction(assetApi.assetManage.scrapAsset, { assetManageId: this.assetManage.id, backNotes: value }).then(res => {
			// 				if (res.success) {
			// 					this.loadInfo(this.assetManage.id)
			// 				}
			// 			})
			// 		})
			// 		.catch(() => {})
			// },
			confirmHandler() {
				this.showAgreeWin = true
			},
			/**
			 * 同意
			 * @param {*} row
			 */
			onSubmitAgree() {
				postAction(assetApi.assetManage.agreeAsset, { assetManageId: this.assetManage.id }).then(res => {
					if (res.success) {
						this.loadInfo(this.assetManage.id)
					}
				})
				this.showAgreeWin = false
			},
			passHandler() {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = 1
				this.instNodeId = this.assetManage.wfInstNodeId
			},
			rejectHandler() {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = -1
				this.instNodeId = this.assetManage.wfInstNodeId
			},
			flowCallback() {
				this.loadInfo(this.assetManage.id)
			},
			handleAgreeClose() {
				this.showAgreeWin = false
			},
			assetExport() {
				window.open(`${assetApi.assetManage.exportData}?assetManageId=${this.assetManage.id}`, '_blank')
			},
		},
	}
</script>
<style>
	@page {
		size: auto;
		margin: 0mm;
	}
</style>
<style lang="scss" scoped>
	.head-card {
		background: #ffffff;
		padding: 15px 15px 10px 15px;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
	}

	.head-con {
		display: flex;
		flex-direction: row;
	}

	.head-btn {
		border-top: 1px solid #f0f0f0;
		// display: flex;
		// justify-content: flex-end;
		text-align: right;
		padding-top: 10px;
	}

	.img-con {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		background: linear-gradient(-28deg, #22b6de, #33e4da);

		img {
			width: 27px;
			height: 27px;
			margin-top: 10px;
			box-shadow: 2px 6px 5px 0px rgba(25, 90, 166, 0.23);
		}
	}

	.head-descriptions {
		flex: 1;
		margin: 15px 15px 0;
	}

	.status-con {
		// width: 120px;
		text-align: right;

		.top {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
		}

		.bottom {
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.info-con {
		margin-top: 10px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		padding: 15px 15px 10px 15px;
	}

	.hasBtnCon {
		min-height: calc(100% - 400px);
	}

	.hasNoBtnCon {
		min-height: calc(100% - 348px);
	}

	.flow-con {
		height: 194px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		margin-top: 10px;
		padding: 15px 15px 10px 15px;
	}

	.steps {
		padding-top: 20px;

		/deep/.el-step__line {
			top: 8px;
			height: 8px;

			i {
				border-width: 4px !important;
			}
		}

		/deep/.el-step__icon {
			border: 2px solid #ffffff;
			box-shadow: 1px 3px 6px 0px rgba(0, 118, 90, 0.24);
			font-size: 24px;
		}
	}

	.title-con {
		height: 22px;
		padding-left: 10px;
		border-left: 2px solid rgba(33, 183, 149, 1);
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		margin-bottom: 10px;
	}

	.asset-list {
		display: flex;
		color: #606266;
		margin-bottom: 10px;
	}

	.marginLeft {
		margin-left: 14px;
	}

	.dialog {
		/deep/.el-dialog__footer {
			padding: 0 !important;
		}
	}

	.dialog-footer {
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		padding: 10px 15px;
	}
	.asset-print {
		display: flex;
		flex-direction: column;
	}
	.file-con {
		width: 82px;
		height: 62px;
		border: 1px solid #7bc6b5;
		margin-right: 15px;
		border-radius: 6px;
		position: relative;
	}
	.image {
		width: 80px;
		height: 60px;
		border-radius: 6px;
	}
</style>
